<template>
	<div class="stationMonitorDiv">
		<div class="commainSelect">
			<a-space :size="30">
				<a-select ref="select" v-model:value="dataType" style="width: 120px" @change="handleChangeDataType">
					<a-select-option value="1">日度</a-select-option>
					<a-select-option value="2">月度</a-select-option>
					<a-select-option value="3">年度</a-select-option>
				</a-select>
				<a-date-picker v-model:value="timeDate" :picker="datatypes" @change="onRangeChange" />
				<!-- <div>充电桩：<a-select ref="select" v-model:value="value1" style="width: 120px" :options="options1" @focus="focus" @change="handleChange"></a-select></div> -->
			</a-space>
		</div>
		<div class="stationMonitorDiv1">
			<div class="lytitle">充电指标监测</div>
			<div class="stationMonitorDiv1main flex">
				<div class="stationMonitorDiv1lt md:w-1/2">
					<gaugecharts :chartData="gaugechartsData" height="300px" />
					<a-space :size="30" class="stationMonitorDiv1_bt">
						<span>充电量分析：</span>
						<span class="stationMonitorDiv1_bt_span">区域排名top: <span style="color: #009688"> -/--</span> </span>
						<span class="stationMonitorDiv1_bt_span">环比: <span style="color: #009688"> --%</span> <img class="imgrotate" src="/@/assets/images/operationoverview/u83.svg" alt="" /></span>
						<span class="stationMonitorDiv1_bt_span"
							>充电预警数: <span style="color: red"> {{ stationMonitorDiv1rtonsData[3].value }}</span>
						</span>
					</a-space>
				</div>
				<div class="stationMonitorDiv1rt md:w-1/2">
					<a-row>
						<a-col :span="12" v-for="(item, index) in stationMonitorDiv1rtonsData">
							<div class="stationMonitorDiv1rtons pl4">
								<!-- <img src="/@/assets/images/panoramicMonitoring/20240910210521.png" alt="" /> -->
								<img :src="item.url" alt="" />
								<div class="stationMonitorDiv1rtons_text">
									<p>
										{{ item.title }}
										<a-tooltip v-if="item.tooltip">
											<template #title>{{ item.tooltip }}</template>
											<Icon style="color: #9f9f9f" icon="ant-design:question-circle-twotone" />
										</a-tooltip>
									</p>
									<p>{{ item.value }}</p>
									<p>{{ item.title2 }} {{ item.value2 }} <img v-show="index == 3 || index == 1" style="width: 10px; height: 10px" class="imgrotate" src="/@/assets/images/operationoverview/u83.svg" alt="" /></p>
								</div>
							</div>
						</a-col>
					</a-row>
				</div>
			</div>
		</div>
		<div class="stationMonitorDiv2">
			<div class="lytitle">充电量趋势</div>
			<div class="stationMonitorDiv2main">
				<MonitorBarGroud :chartData="barData" height="300px" />
			</div>
		</div>
		<div class="stationMonitorDiv3">
			<div class="lytitle">预警原因分析</div>
			<div class="stationMonitorDiv3main">
				<a-row>
					<a-col :span="9">
						<PieUser :chartData="userCityData" height="280px" :titleValue="userTitle" />
					</a-col>
					<a-col :span="5">
						<Funnelecharts :chartData="levelNumMap" />
					</a-col>
					<a-col :span="10">
						<stationrtBar :chartData="stationrtBarData" height="280px" />
					</a-col>
				</a-row>
				<div class="stationMonitorDiv3lt"></div>
				<div class="stationMonitorDiv3ct"></div>
				<div class="stationMonitorDiv3rt"></div>
			</div>
		</div>
		<div class="stationMonitorDiv4">
			<div class="lytitle">近期预警</div>
			<FrWarningInfoList />
		</div>
		<div class="stationMonitorDiv5">
			<div class="lytitle">近期订单</div>
			<testTable />
		</div>
	</div>
</template>

<script lang="js" name="stationMonitor" setup>
	import {ref, reactive, computed, unref, defineComponent} from 'vue';
	// import BizOperatorsList from '/@/views/AssetManagement/Operator/BizOperatorsList.vue';
		import testTable from '/@/views/panoramicMonitoring/SiteMonitorings/index.vue';
	import FrWarningInfoList from '/@/views/warningProtection/BizWarningInfo/FrWarningInfoList.vue';
	import gaugecharts from './stationmonitordiv/gaugecharts.vue';
	import {stationIndicator, stationChargeCurve, warnInfoAnalysis, stakeWarnNum} from '/@/api/panoramicMonitoring/SiteMonitoringDetails';

	const gaugechartsData = ref([
		{name: '充电量（度）', value: 2454},
		{name: '充电订单（笔）', value: 101},
		{name: '充电时长（小时）', value: 79.6},
	]);
	import MonitorBarGroud from './stationmonitordiv/MonitorBarGroud.vue';

	import {useRouter} from 'vue-router';
	const router = useRouter();
	// 时间选择
	import dayjs from 'dayjs';
	const dataType = ref('1');
	const timeDate = ref(dayjs());
	const datatypes = ref('date');
	function handleChangeDataType(value) {
		datatypes.value = dataType.value == '1' ? 'date' : dataType.value == '2' ? 'month' : 'year';
	}
	function onRangeChange(dates, dateString) {
		console.log('onRangeChange', dates, dateString);
		params.type = dataType.value;
		params.date = dataType.value == '1' ? dayjs(dates).format('YYYY-MM-DD') : dataType.value == '2' ? dayjs(dates).format('YYYY-MM') : dataType.value == '3' ? dayjs(dates).format('YYYY') : '';
		dates = dataType.value == '1' ? dayjs(dates).format('YYYY-MM-DD') : dataType.value == '2' ? dayjs(dates).format('YYYY-MM') : dataType.value == '3' ? dayjs(dates).format('YYYY') : '';
		initdata();
	}
	function initdata() {
		getStationIndicator();
		getStationChargeCurve();
		getwarnInfoAnalysis();
		getstakeWarnNum();
	}
	const params = reactive({
		stationId: router.currentRoute.value.query.stationId,
		type: dataType.value,
		date: dataType.value == '1' ? dayjs(timeDate.value).format('YYYY-MM-DD') : dataType.value == '2' ? dayjs(timeDate.value).format('YYYY-MM') : dataType.value == '3' ? dayjs(timeDate.value).format('YYYY') : '',
	});
	const stationIndicatordata = ref(null);
	const getStationIndicator = async () => {
		const res = await stationIndicator(params);
		stationIndicatordata.value = res;
		gaugechartsData.value[0].value = res.totalCapacity;
		gaugechartsData.value[1].value = res.orderNums;
		gaugechartsData.value[2].value = res.totalChargeTimes;
		stationMonitorDiv1rtonsData.value[0].value = res.totalCapacity;
		stationMonitorDiv1rtonsData.value[1].value = res.orderNums;
		stationMonitorDiv1rtonsData.value[1].value2 = res.orderNumsGrowth;
		stationMonitorDiv1rtonsData.value[2].value = res.totalChargeTimes;
		stationMonitorDiv1rtonsData.value[2].value2 = res.timeRate;
		stationMonitorDiv1rtonsData.value[3].value = res.totalAlterWarnNum;
		stationMonitorDiv1rtonsData.value[3].value2 = res.alterWarnGrowth;
		stationMonitorDiv1rtonsData.value[4].value = res.totalChargeCarNum;
		stationMonitorDiv1rtonsData.value[5].value = res.useRate;
	};

	const barData = ref([]);

	function getStationChargeCurve() {
		stationChargeCurve(params).then((res) => {
			barData.value = res.map((item) => {
				return {
					name: item.date,
					value: item.power,
				};
			});
		});
	}
	// 预警原因分析 left
	import PieUser from './stationmonitordiv/PieUser.vue';
	const levelNumMap = ref([
		{value: 10, name: '高风险'},
		{value: 80, name: '中风险'},
		{value: 1003, name: '低风险'},
	]);
	const userTitle = ref({
		title: '预警总数',
		proportion: 0,
	});
	const userCityData = ref([
		{name: '最高温度异常', value: 64},
		{name: '需求电流超过', value: 52},
		{name: '最大温升速率.', value: 33},
		{name: '充电 soc 不变', value: 164},
		{name: '其他', value: 34},
	]);
	function getwarnInfoAnalysis() {
		warnInfoAnalysis(params).then((res) => {
			console.log('warnInfoAnalysis', res);
			userCityData.value = res.reasonNumMap.map((item) => {
				return {
					name: item.name,
					value: item.num,
				};
			});
			levelNumMap.value = res.levelNumMap.map((item) => {
				return {
					value: item.num,
					name: item.name == '1' ? '低风险' : item.name == '2' ? '中风险' : '高风险',
				};
			});
			userTitle.value.proportion = res.reasonNumMap.reduce((acc, item) => acc + item.num, 0);
		});
	}
	const stationrtBarData = ref(null);
	function getstakeWarnNum() {
		stakeWarnNum(params).then((res) => {
			console.log('getstakeWarnNum', res);
			stationrtBarData.value = res;
		});
	}

	onMounted(() => {
		initdata();
	});
	import img1 from '/@/assets/images/panoramicMonitoring/monitor1.png';
	import img2 from '/@/assets/images/panoramicMonitoring/monitor2.png';
	import img3 from '/@/assets/images/panoramicMonitoring/monitor3.png';
	import img4 from '/@/assets/images/panoramicMonitoring/monitor4.png';
	import img5 from '/@/assets/images/panoramicMonitoring/monitor5.png';
	import img6 from '/@/assets/images/panoramicMonitoring/monitor6.png';
	const stationMonitorDiv1rtonsData = ref([
		{url: img1, title: '累计充电量（度）', value: 245454, title2: '区域充电量排名:', value2: '--'},
		{url: img2, title: '累计订单数（笔）', value: 2454, title2: '环比:', value2: 245454},
		{url: img3, title: '累计充电时长(小时)', value: 101, title2: '时长利用率:', value2: 245454, tooltip: '累计充电时长(小时)'},
		{url: img4, title: '累计充电预警数', value: 79.6, title2: '环比:', value2: 245454},
		{url: img5, title: '累计服务车辆数(辆)', value: 79.6, title2: '', value2: '', tooltip: '累计服务车辆数(辆)'},
		{url: img6, title: '容量利用率(%)', value: 79.6, title2: '区域利用率排名:', value2: '--', tooltip: '容量利用率(%)'},
	]);

	// 预警原因分析 center
	import Funnelecharts from './stationmonitordiv/Funnelecharts.vue';
	// 预警原因分析 right
	import stationrtBar from './stationmonitordiv/stationrtBar.vue';

	// 选择

	// 桩选择
	const value1 = ref('lucy');
	const options1 = ref([
		{
			value: 'jack',
			label: '桩12',
		},
		{
			value: 'lucy',
			label: '桩1224',
		},
		{
			value: 'disabled',
			label: '桩12457',
			disabled: true,
		},
		{
			value: 'yiminghe',
			label: '桩1277',
		},
	]);
</script>

<style lang="less" scoped>
	:deep(.ant-picker),
	:deep(.ant-input-number) {
		width: 100%;
	}

	.lytitle {
		position: relative;
		padding-left: 10px;
		font-family: 'PingFangSC-Regular';
		font-weight: 400;
		font-style: normal;
		color: rgb(0, 0, 0);
		font-size: 18px;

		&::before {
			content: '';
			width: 4px;
			height: 16px;
			background-color: #009688;
			position: absolute;
			left: 0;
			top: 6px;
		}
	}

	.stationMonitorDiv {
		position: relative;

		.commainSelect {
			position: absolute;
			right: 32px;
			top: -60px;
			z-index: 99;
		}
	}

	.stationMonitorDiv1_bt {
		display: flex;
		justify-content: center;
		font-size: 16px;

		.stationMonitorDiv1_bt_span {
			position: relative;

			&::before {
				content: '';
				width: 10px;
				height: 10px;
				background-color: #009688;
				position: absolute;
				left: -12px;
				top: 7px;
				border-radius: 50%;
			}
		}
	}

	.imgrotate {
		transform: rotate(180deg);
	}

	.stationMonitorDiv1rtons {
		display: flex;
		justify-content: center;
		margin-bottom: 1.5rem;
		width: 32rem;

		img {
			width: 50px;
			height: 50px;
			margin-right: 1rem;
		}

		.stationMonitorDiv1rtons_text {
			min-width: 250px;

			p {
				margin-bottom: 0px;
			}

			p:nth-of-type(1) {
				font-weight: 300;
				font-style: normal;
				font-size: 14px;
				letter-spacing: normal;
				color: rgb(51, 51, 51);
			}

			p:nth-of-type(2) {
				font-weight: 600;
				font-style: normal;
				font-size: 28px;
			}

			p:nth-of-type(3) {
				font-weight: 300;
				font-style: normal;
				font-size: 14px;
				color: #9f9f9f;
			}
		}
	}
</style>
